<link rel="stylesheet" href="/assets/admin/css/reset.css">
<style>
    .panel-heading {
        width: 100%;
        padding: 20px 20px;
        box-sizing: border-box;
    }

    .panel-heading .vedio {
        width: 100%;
        padding: 20px 20px;
        box-sizing: border-box;
        display: flex;
        justify-content: flex-start;
        align-items: center;
        flex-wrap: wrap;
    }

    .panel-heading .vedio li {
        width: 180px;
        height: 100px;
        line-height: 100px;
        border: 1px solid #f8f8f8;
        margin-right: 5px;
        text-align: center;
        cursor: pointer;
        margin-bottom: 10px;
    }

    .panel-body {
        width: 100%;
        padding: 20px 30px;
        box-sizing: border-box;
    }

    .panel-body .line {
        border-top: 2px solid #18bc9c;
        margin: 20px 0;
    }

    .panel-body .nav-bar .nav-items li span {
        display: inline-block;
        padding: 10px;
        text-align: center;
        box-sizing: border-box;
        cursor: pointer;
        width: 100px;
    }
</style>

<div class="panel panel-default panel-intro">
    <div class="panel-heading">
        <ul class="vedio">
            <li class="active">视频1</li>
            <li class="active">视频2</li>
            <li class="active">视频3</li>
            <li class="active">视频4</li>
        </ul>

    </div>
    <div class="panel-body">
        <div class="nav-bar">
            <ul class="nav-items ">
                <li id="navClickBtn">
                    <span>序号</span>
                    <span>{:__('wellhead_id')}</span>
                    <span>{:__('in_rate')}</span>
                    <span>{:__('in_oC')}</span>
                    <span>{:__('in_KPa')}</span>
                    <span>{:__('out_flow')}</span>
                    <span>{:__('out_oC')}</span>
                    <span>{:__('out_KPa')}</span>
                </li>
                <div id="slide">
                    {volist name='data' id='vo'}
                    <li>
                        <span>{$vo.id}</span>
                        <span>{$vo.wellhead_id}</span>
                        <span>{$vo.in_rate}</span>
                        <span>{$vo.in_oC}</span>
                        <span>{$vo.in_KPa}</span>
                        <span>{$vo.out_flow}</span>
                        <span>{$vo.out_oC}</span>
                        <span>{$vo.out_KPa}</span>
                    </li>
                    {/volist}

                </div>
            </ul>
        </div>
        <div class="nav-bar line">
            <ul class="nav-items">
                <li id="navClickBtns">
                    <span>序号</span>
                    <span>{:__('datetime')}</span>
                    <span>{:__('address')}</span>
                    <span>{:__('instan_rate')}</span>
                    <span>{:__('total_rate_hour')}</span>
                    <span>{:__('total_rate_day')}</span>
                    <span>{:__('total_rate_month')}</span>
                    <span>{:__('tatal_rate_year')}</span>
                </li>
                <div id="slides">
                    {volist name='rate' id='ra'}
                    <li>
                        <span>{$ra.id}</span>
                        <span>{$ra.datetime}</span>
                        <span>{$ra.address}</span>
                        <span>{$ra.instan_rate}</span>
                        <span>{$ra.total_rate_hour}</span>
                        <span>{$ra.total_rate_day}</span>
                        <span>{$ra.total_rate_month}</span>
                        <span>{$ra.total_rate_year}</span>
                    </li>
                    {/volist}
                </div>
            </ul>
        </div>

    </div>
</div>